<script>
var Tab = {
  name: 'Tab',
  template: '<div class="my-tabs">' +
      '    <div class="my-head" ref="head">' +
      '      <button class="my-tab" v-for="(item,index) in headers" :key="index" :data-index="index"' +
      '              :class="{active:(index===tabsStatus.currIndex)}"' +
      '              @click="tabClick(index)">' +
      '        {{item}}' +
      '      </button>' +
      '    </div>' +
      '    <div class="my-contents" ref="contents">' +
      '      <div class="my-content" v-for="(item,index) in headers" :key="index" :data-index="index"' +
      '           :class="{active:(index===tabsStatus.currIndex)}" v-if="(index===tabsStatus.currIndex)">' +
      '        <slot :name="index"/>' +
      '      </div>' +
      '    </div>' +
      '  </div>',
  props: {
    headers: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  data: function () {
    return {
      tabsStatus: {
        currIndex: 0
      }
    }
  },
  methods: {
    tabClick: function (currIndex) {
      const self = this
      // for (let i = 0; i < self.$refs.head.children.length; i++) {
      //   self.$refs.head.children[i].classList.remove('active')
      // }
      // for (let i = 0; i < self.$refs.contents.children.length; i++) {
      //   self.$refs.contents.children[i].classList.remove('active')
      // }
      // e.target.classList.add('active')
      // self.$refs.contents.children[index].classList.add('active')
      self.tabsStatus.currIndex = currIndex
      self.$emit('tabClicked', currIndex)
    }
  }
}
export default Tab
</script>
<style scoped>
@import './tab.css';
</style>

